<!DOCTYPE html>
<html>
<head>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"
	type="text/javascript"></script>

<script type="text/javascript">
  $(document).ready(function() {
$('#slickbox').hide();
 $('#slick-show').click(function() {
$('#slickbox').show('slow');
return false;
});
$('#slick-hide').click(function() {
 $('#slickbox').hide('fast');
return false;
});
 $('#slick-toggle').click(function() {
 $('#slickbox').toggle(400);
return false;
 });
 console.log("done");
});
  </script>
</head>
<body>
	<p>
		<a href="#" id="slick-show">Show the box</a>&nbsp;&nbsp;<a href="#"
			id="slick-hide">Hide the box</a>&nbsp;&nbsp;<a href="#"
			id="slick-toggle">Toggle the box</a>
	</p>
	<p>
		<a href="javascript:$('#slickbox').toggle('slow');">foo</a>
	</p>
	<div id="slickbox" style="display: block;">This is the box that
		will be shown and hidden and toggled at your whim. :)</div>
        
        <p>
        <a href="javascript:$('#bar').toggle('slow');">bar</a>
    </p>
    
    <p><table>
    <thead><tr><th>first<th>second
    <tbody id="bar">
    <tr><td>1<td>2
    <tr><td>3<td>4
    </tbody>
    <tbody>
    <tr><td>5<td>6
    </tbody>
    </table>
</body>
</html>